<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1200px;
            height: 200px;
            background-color: #f00;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>

    <div></div>

    <script>

        // 一个盒子从左边移动到右边   实际上就是 left在改变


        // 获取样式
        //    oDiv.style.left  获取left值   但是只能获取行内样式
        //    getComputedStyle(oDiv).left   获取left值   可以获取任意样式  --- 注意会带单位




        // var oDiv = document.querySelector('div');


        // var _left = parseInt(getComputedStyle(oDiv).left);
        // console.log(_left);

        // var t = setInterval(function () {
        //     _left += 10;
        //     oDiv.style.left = _left + 'px';
        //     if (_left >= 1000) {
        //         oDiv.style.left = 1000 + 'px';
        //         clearInterval(t);
        //     }
        // }, 10)

        // move('div', 20, 1000, 'width')

        // function move(el, speed, end, prop) {
        //     var oDiv = document.querySelector(el);
        //     var _left = parseInt(getComputedStyle(oDiv)[prop]);
        //     console.log(_left);

        //     var t = setInterval(function () {
        //         _left += speed;
        //         oDiv.style[prop] = _left + 'px';
        //         if (_left >= end) {
        //             // 如果超出了终点，就强行到达终点
        //             oDiv.style[prop] = end + 'px';
        //             clearInterval(t);
        //         }
        //     }, 10)
        // }





        // 反向运动
        // move('div', 10, 0, 'width')
        // function move(el, speed, end, prop) {
        //     var oDiv = document.querySelector(el);
        //     var _left = parseInt(getComputedStyle(oDiv)[prop]);
        //     console.log(_left);

        //     var t = setInterval(function () {
        //         _left -= speed;
        //         oDiv.style[prop] = _left + 'px';
        //         if (_left <= end) {
        //             // 如果超出了终点，就强行到达终点
        //             oDiv.style[prop] = end + 'px';
        //             clearInterval(t);
        //         }
        //     }, 10)
        // }



        // move('div', 10, 200, 'width')


        var oDiv = document.querySelector('div');
        oDiv.onclick = function () {
            move('div', 10, 200, 'width')
        }



        // 正向运动和反向运动的封装
        function move(el, speed, end, prop) {
            var oDiv = document.querySelector(el);
            var start = parseInt(getComputedStyle(oDiv)[prop]);
            // console.log(_left);

            // 判断参数就可以知道是正向运动还是反向运动
            if (end < start) {   // 终点大于起点   正向运动
                speed = -speed;
            }

            var t = setInterval(function () {
                start += speed;
                oDiv.style[prop] = start + 'px';
                // 快到终点或者到达终点的时候 就停下来   --- 剩下的距离小于speed
                if (Math.abs(end - start) < Math.abs(speed)) {
                    // 如果没有到达终点，就强行到达终点
                    oDiv.style[prop] = end + 'px';
                    clearInterval(t);
                }
            }, 10)
        }



    </script>

</body>

</html>